<template>
  <div class="footer">
    <input type="checkbox" @change="checkAll" />
    <span>已完成{{ doneToDos }} / 全部{{ allToDos }}</span>
    <button @click="del">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "FooterPart",
  props: ["ToDos", "delToDos", "checkToDos"],
  computed: {
    //全部
    allToDos() {
      return this.ToDos.length;
    },
    //已完成
    doneToDos() {
      let doneToDos = this.ToDos.filter((d) => {
        return d.done;
      });
      return doneToDos.length;
    },
  },
  methods: {
    //选择或取消所有
    checkAll(e) {
      this.checkToDos(e.target.checked);
    },
    //删除所有已选择
    del() {
      this.delToDos();
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  width: 500px;
  margin: 30px 15px 10px 15px;
  input {
    vertical-align: middle;
    margin-right: 20px;
    cursor: pointer;
  }
  button {
    background-color: #d65044;
    border: 1px solid #cccccc;
    padding: 3px 10px;
    margin-top: -3px;
    border-radius: 3px;
    color: #e2e2e2;
    float: right;
    cursor: pointer;
  }
}
</style>